/*
 * @Description: 登陆
 * @Autor: 万洲
 * @Date: 2022-10-17 10:02:59
 * @LastEditors: 万洲
 * @LastEditTime: 2022-11-23 16:02:48
 */
import { defineComponent, reactive, ref, StyleValue, watch } from "vue";
import style from "./index.module.scss";
import { useCssVar } from "@vueuse/core";
import { ElButton, ElCheckbox, ElForm, ElFormItem, ElInput } from "element-plus";
import { reqGetUserInfo, reqLogin } from "@/api/User";
import useUserStore from "@/store/useUserStore";
import router from "@/router";
import $$ from "@/utils/wzUtils";
import config from "@/constants/config";
interface IFormModel {
	username: string;
	password: string;
}
interface IState {
	loginLoading: boolean;
	formModel: IFormModel;
	remember: boolean;
}
export default defineComponent({
	setup: (props) => {
		const state = reactive<IState>({
			formModel: {
				username: "admin",
				password: "admin123"
			} as IFormModel,
			loginLoading: false,
			remember: false
		});
		const userStore = useUserStore();
		/**
		 * 登陆
		 */
		const handleLogin = async () => {
			state.loginLoading = true;
			let result = await reqLogin(state.formModel);
			state.loginLoading = false;
			if (!result.token) return;
			$$.showToast("登陆成功");
			userStore.setToken(result.token);
			let userResult = await reqGetUserInfo();
			userStore.setUserInfo(userResult.user);
			router.replace("/");
		};
		return () => (
			<>
				<div class={style.loginContaier}>
					<div class={style.formContaier}>
						<ElForm>
							<ElFormItem>
								<div class={style.loginFormTitle}>{config.webTitle}</div>
							</ElFormItem>
							<ElFormItem>
								<ElInput
									v-model={state.formModel.username}
									placeholder="账号"
									inputStyle={{ height: "48px" }}
									onKeydown={(e: any) => {
										e.keyCode === 13 && handleLogin();
									}}
								/>
							</ElFormItem>
							<ElFormItem>
								<ElInput
									v-model={state.formModel.password}
									placeholder="密码"
									inputStyle={{ height: "48px" }}
									onKeydown={(e: any) => {
										e.keyCode === 13 && handleLogin();
									}}
									type={"password"}
								/>
							</ElFormItem>
							{/* <ElFormItem >
                                <div class="flexBetween">
                                    <ElInput v-model={state.formModel.value} placeholder="验证码" />
                                    <img src="http://layui.pearadmin.com/admin/images/captcha.gif" style={{ marginLeft: "10px" }} />
                                </div>
                            </ElFormItem> */}
							<ElFormItem>
								<ElCheckbox v-model={state.remember} label={"记住密码"} />
							</ElFormItem>
							<ElFormItem>
								<ElButton style={{ width: "100%", height: "35px" }} type={"primary"} loading={state.loginLoading} onClick={handleLogin}>
									登入
								</ElButton>
							</ElFormItem>
						</ElForm>
					</div>
				</div>
			</>
		);
	}
});
